<template>
  <el-container :direction="vertical" class="bg fixed">
    <!--elcon 快捷键快速生成页面模板-->
    <el-header height="">
      <div class="logo">
        <img src="" alt="" />
      </div>
      <h1>盛邦山项目考试管理系统登录页</h1>
    </el-header>
    <el-container :direction="horizontal" class="content">
      <el-main class="content-body">
        <el-form
        class="margin-top-20"
          :model="form"
          ref="form"
          :rules="rules"
          label-width="120px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="用户名：" prop="username">
            <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="userpassword">
            <el-input v-model="form.userpassword" prefix-icon="el-icon-lock" type="password"></el-input>
          </el-form-item>
          <!-- <el-form-item label="确认密码：">
            <el-input v-model="repeatPassword" type="password" prefix-icon="el-icon-lock" @blur="handleComparePassword"></el-input>
            <div class="el-form-item__error" v-if="!isEqualPassword">两次密码不一致，请确认密码</div>
          </el-form-item> -->
          <!-- <el-form-item label="手机号码：" prop="userphone">
            <el-input v-model="form.userphone" prefix-icon="el-icon-mobile"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="mini">立即登录</el-button>
            <router-link to="/register" class="float-right">未有账号，返回注册</router-link>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <el-footer height="60px">
      <div class="slogan">
        <span>-</span>
        <span>学好硬本领,赢在软实力</span>
        <span>-</span>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { setItem } from "@/utils/storage.js";
export default {
  data() {
    return {
      horizontal: "horizontal",
      vertical: "vertical",
      form: {
        username: "",
        userpassword: "",
        userphone: "",
      },
      // 正则验证使用的规则 验证 form 中的数据
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名" },
        ],
        userpassword: [
          { required: true, trigger: "blur", message: "请输入密码" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      // 创建表单对象
      const formData = new FormData();
      // 将this.form 中的数据添加到表单对象中
      for (let key in this.form) {
        // 使用append(key,value)方法向表单中添加数据
        formData.append(key,this.form[key]);
      }
      // 提交数据
      this.$axios({
        url:"/system/sqUserlogin/userLogin",
        method:"post",
        data:formData
      }).then(res => {
        if(res.data.code === 1){
            //注册成功
           this.$alert(res.data.msg, "登录")
            //设置本地存储
            setItem("userInfo",res.data.data.userInfo);
            setItem("userRole",res.data.data.userRoleInfo[0]);
            setItem("token",res.data.data.Token);
            // 保存信息到vueX中的 userInfo,解决不能同步刷新的问题
            this.$store.commit("userInfoMutation",res.data.data.userInfo);
            this.$store.commit("userRoleMutation",res.data.data.userRoleInfo[0]);
            //登录成功跳转首页
            this.$router.push("/admin/home")
            return;

            return;
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.bg {
  background-image: url(../../assets/images/bg.jpg);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
h1 {
  text-align: center;
  line-height: 70px;
}

.content {
  justify-content: center;
  align-items: center;
  .content-body {
    flex: 0 0 600px;
    background-color: rgba(48, 28, 226, 0.2);
    border: solid 2px rgb(30, 13, 175);
    box-shadow: 10px 10px 15px rgb(61, 41, 236);
  }
}
.slogan{
  text-align: right;
  line-height: 60px;
  font-size: 26px;
  letter-spacing: 0.5em;
  margin-right: 30px;
}
</style>